/**
 * Created by hgq on 2017/2/16.
 */
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View ,TextInput ,PixelRatio, ScrollView} from 'react-native';



var onePT = 1 / PixelRatio.get();


class TextSearchComponent extends Component{

    //show boolean this.state
    //value 显示的值
    constructor(props){
        super(props);
        this.state = {
            show:false,
            value:null
        }
    }
    hide(val){
        this.setState({
            show:false,
            value:val,
        })
    }
    getValue(text){
        this.setState({
            show:true,
            value:text,
        })
    }

    render(){
        return(
        <View style={[styles.flex,styles.topStatus]}>
            <View style={styles.flex}>
                <View style={[styles.flex,styles.flexDirection]}>
                    <View style={[styles.flex,styles.input]}>
                        <TextInput
                            returnKeyType='web-search'
                            value={this.state.value}
                            placeholder='请输入关键字'
                            onChangeText={this.getValue.bind(this)}
                        />
                    </View>
                    <View style={styles.btn}>
                        <Text style={styles.search} onPress={this.hide.bind(this,this.state.value)}>搜索</Text>
                    </View>
                </View>
                {this.state.show?
                    <View style={styles.result}>
                        <Text onPress={this.hide.bind(this, this.state.value + '加东方QQ')}
                              style={styles.item} numberOfLines={1}>{this.state.value}加东方QQ</Text>
                        <Text onPress={this.hide.bind(this, this.state.value + '园街')}
                              style={styles.item} numberOfLines={1}>{this.state.value}园街</Text>
                        <Text onPress={this.hide.bind(this, 80 + this.state.value + '综合商店')}
                              style={styles.item} numberOfLines={1}>80{this.state.value}综合商店</Text>
                        <Text onPress={this.hide.bind(this, this.state.value + '桃')}
                              style={styles.item} numberOfLines={1}>{this.state.value}桃</Text>
                        <Text onPress={this.hide.bind(this, '东方耀' + this.state.value )}
                              style={styles.item} numberOfLines={1}>东方耀{this.state.value}</Text>
                    </View>
                    :null
                }
            </View>
        </View>

        )
    }
}

const styles = StyleSheet.create({
    result:{
        marginTop:onePT,
        marginLeft:18,
        marginRight:5,
        height:200,
    },
    flex:{
        flex:1
    },
    flexDirection:{
        flexDirection:'row'
    },
    topStatus:{
        marginTop:25
    },
    input:{
        height:45,
        borderColor:'red',
        borderWidth:1,
        marginLeft:10,
        paddingLeft:10,
        borderRadius:5
    },
    btn:{
        width:45,
        marginLeft:-5,
        marginRight:5,
        backgroundColor:'#23beff',
        height:45,
        justifyContent:'center',
        alignItems:'center'
    },
    search:{
        color:'#fff',
        fontSize:15,
        fontWeight:'bold'
    }
});
export default TextSearchComponent;